import { defineStore } from 'pinia'
import ls from '@/utils/securels'
import store from '../index'
import router from '@/router'

interface state {
  headerHegiht: string
  theme: 'defaultAlgorithm' | 'darkAlgorithm'
  aside: 'light' | 'dark'
  layoutMode: 'sidemenu' | 'topmenu'
  contentWidth: 'Fluid' | 'Fixed'
  hasTab: boolean
  fixedHeader: boolean
  autoHideHeader: boolean
  fixSiderbar: boolean
  color: any
  from1: string
  from2: string
  token: string
  orgId: number | ''
  platformId: number | ''
  templateUrl: string
  IMUrl: string
  components: any
}

export const userStore = defineStore('user', {
  state: (): state => ({
    token: '',
    headerHegiht: '48px',
    theme: 'defaultAlgorithm',
    aside: 'dark',
    layoutMode: 'sidemenu',
    contentWidth: 'Fluid',
    hasTab: false,
    fixedHeader: false,
    autoHideHeader: false,
    fixSiderbar: false,
    from1:
      import.meta.env.MODE == 'aliyun'
        ? window.location.origin + '/'
        : window.location.protocol + '//' + window.location.hostname + ':8081/',
    from2: 'gateway',
    orgId: 58,
    platformId: 102,
    templateUrl: window.location.origin.replace(/:[0-9]+/g, '') + ':51740',
    IMUrl: window.location.origin.replace(/:[0-9]+/g, '') + ':8898',

    bodyStyle: {
      // maxHeight: window.innerHeight * 0.8 - 150 + 'px',
      maxHeight: 'calc(80vh - 150px)',
      overflow: 'hidden auto'
    },
    tabsStyle: {
      // maxHeight: window.innerHeight * 0.8 - 250 + 'px',
      maxHeight: 'calc(80vh - 250px)',
      overflow: 'hidden auto'
    },
    components: {
      Button: {
        colorPrimary: '#165DFF',
        colorBorder: '#C9CDD4',
        colorPrimaryHover: '#4080FF',
        colorText: '#4E5969',
        colorLink: '#165DFF',
        colorLinkHover: '#4080FF'
      },
      Tabs: {
        colorPrimary: '#165DFF',
        colorText: '#4E5969',
        colorPrimaryHover: '#4080FF'
      },
      Switch: {
        colorPrimary: '#165DFF',
        colorPrimaryHover: '#4080FF'
      },
      Radio: {
        colorPrimary: '#165DFF'
      },
      Pagination: {
        colorPrimary: '#165DFF',
        colorPrimaryHover: '#4080FF'
      },
      Checkbox: {
        colorPrimary: '#165DFF',
        colorPrimaryHover: '#4080FF'
      },
      Select: {
        colorPrimaryBg: '#E8F3FF'
      }
    },
    color: {
      colorPrimary: '#165DFF',
      colorDanger: '#f53f3f',
      borderRadius: 2,
      colorTextBase: '#000',
      colorPrimaryHover: '#4080FF',
      colorPrimaryBg: '#E8F3FF'
    }
  }),
  getters: {},
  actions: {
    changeTheme(payload: g.theme) {
      this.theme = payload
    },
    changeThemeColor(payload: g.color) {
      this.color = payload
    },
    setToken(payload: string) {
      this.token = payload
    },
    LoginOut() {
      store.userApp.userInfo = ''
      this.token = ''
      router.push('/Login')
    }
  },
  persist: {
    storage: {
      setItem: (key, value) => ls.set(key, value),
      getItem: (key) => ls.get(key)
    }
  }
})

export function setTheme(theme, color) {
  const option = {
    darkAlgorithm: {
      '--color--primary': color.colorPrimary,
      '--color--primary--hover': color.colorPrimaryHover,
      '--color--bg-base': '#000',
      '--color--danger': color.colorDanger,
      '--color--bg-second': '#222',
      '--color--text-base': '#f7f7f7',
      '--color--text': color.colorTextBase
    },
    defaultAlgorithm: {
      '--color--primary': color.colorPrimary,
      '--color--primary--hover': color.colorPrimaryHover,
      '--color--bg-base': '#fff',
      '--color--danger': color.colorDanger,
      '--color--bg-second': '#f5f5f5',
      '--color--text-base': '#191919',
      '--color--text': color.colorTextBase
    }
  }
  const map = {
    darkAlgorithm: 'dark',
    defaultAlgorithm: 'light'
  }
  document.documentElement.setAttribute('theme', map[theme])
  for (const key in option[theme]) {
    if (Object.prototype.hasOwnProperty.call(option[theme], key)) {
      document.documentElement.style.setProperty(key, option[theme][key])
    }
  }
}
